草庐IT

css定位 position:sticky

全部标签

javascript - kendo ui 工具提示在网格内的定位问题

我对网格单元格内的kendoui工具提示有疑问。在网格中,我显示了一个简单的文档文件夹。每行列出一个文件。在第一列中,我有一个小的预览图标和一个图像或文件的下载链接。如果我将鼠标悬停在图像上,则会调用工具提示。例子:"title=""data-url="">"border="0"alt=""/>工具提示插入如下:#=target.data('title')#$("#grid").kendoTooltip({filter:"a.has_preview",content:kendo.template($("#template").html()),position:"top"});问题是:如

javascript - -webkit-overflow-scrolling 打破了绝对定位

我正在构建一个页面,该页面需要一些元素在页面顶部滚动,否则它们会滚动到屏幕之外。我设法使用position:absolute做到了这一点。一切都运行良好,但它需要动量滚动。我将-webkit-overflow-scrolling:touch添加到可滚动区域的css中。这打破了一切。我的带有position:absolute的粘性元素现在只是与其余内容一起滚动。我的问题是:为什么-webkit-overflow-scrolling:touch会影响绝对定位,有没有办法解决这个问题?更新:每当子元素变为“固定”或“未固定”时,我都会添加一个警报。警报继续触发,因此样式仍在应用,只是不起作用

javascript - 等到 CSS 更改(调整大小)生效后再继续脚本

我有一个脚本可以更改Canvas的大小以适合正在加载的图像,然后从Canvas下载图像。我需要调整它的大小,否则下载的图像包含周围的任何空白并且看起来比它应该的小。originalImg.onload=function(){varwidth=originalImg.width;varheight=originalImg.height;$("#myCanvas").css({"height":height+"px","width":width+"px","margin-bottom":-height+"px"});varc=viewer.drawer.canvas;c.toBlob(fu

javascript - Materialise CSS 框架抛出错误

使用Materialise0.96.1运行Meteor1.1.6并且没有任何问题,直到有一天早上我启动meteor并出现白屏。控制台(Firebug)说:SyntaxError:unterminatedstringliteralvarc="input[type=text],input[type=passw在生成的文件materialize_materialize.js中找到回溯版本历史,我似乎找不到任何明显的我更改的内容,这可能是罪魁祸首。查看源代码,我找到了代码各自的代码,但该行实际上已终止:varc="input[type=text],input[type=password],in

javascript - 找出 Protractor 元素 CSS 链

出于开发和调试目的,如果知道我在以下方法中询问的完整CSS链是什么,那将是非常好的:divElm.element(by.css("article")).element(by.css("tbody>tr")).then(function(elm){//isthereawaytoknowherewhatisthe"CSSchain"of'elm'?});如果我调试elm,我会看到一个locator属性:locator_:{using:'cssselector',value:'tbody>tr'},但这只是链中最后一个元素的定位符。拥有所有东西真的很有用,比如:divElm,article,

javascript - 位置 :sticky : Adding style when the element detaches from normal flow

举个简单的例子:MYNAVBAR和基本样式:#mynav{position:sticky;}我想将以下样式信息应用到我的导航栏仅当它脱离正常流程时,以便从视觉上将其与主要内容分开(在这种情况下带有阴影)box-shadow:0px10px15px0pxrgba(0,0,0,0.75);我可以使用某种伪类或类似媒体查询的东西吗?例如:#mynav:some-pseudo-class{box-shadow:0px10px15px0pxrgba(0,0,0,0.75);}我知道有一些很好的插件,但如果不绕过(相当新的)native功能position:sticky,它们似乎都无法实现它。相反

javascript - 我如何在 React Native 中使用 CSS

我可以使用CSS来设计我的ReactNative组件吗?目前我只能像这样使用StyleSheet:varstyles=React.StyleSheet.create({autocomplete:{backgroundColor:'#FFF',zIndex:5,},...我想使用CSS而不是ReactJs 最佳答案 首先创建一个名为App.module.css的文件然后在这里写你的纯CSS.container{background-color:rgb(44,0,95);width:100%;height:100%;}然后,在你的js文

Javascript/CSS 灯箱仅适用于第一个元素?

我试图在点击每张照片时在Javascript/CSS灯箱中打开我的每张照片。目前,只有我的照片列表中的第一张照片在灯箱中打开。其他照片不会在灯箱中打开。请有人解释/告诉我这是为什么,并解释/告诉我这样做的正确方法吗?这是我的HTML/PHP:query("SELECT*FROMuser_dataWHEREuser_id=$p_id");if($result4->num_rows>0){echo'';echo'';echo'';echo'';echo'';echo'';}?>×CSS:#myImg{cursor:pointer;transition:0.3s;}#myImg:

javascript - URL 中的 HTML 和 CSS 导致 404 错误(用户代理 = Trident/4.0)

我在URL中收到一些带有代码片段(CSS、HTML和JavaScript)的404。据我所知,用户在他们的session期间在网站上的进展情况很好-它是一个电子商务网站,受影响的用户正在将东西放入他们的购物篮并检查OK等。在某些页面上,我看到404错误与看似成功的页面显示相邻。每次显示该页面(在该session中)时,我都会收到相同的404错误。记录的404错误示例:404;http://www.example.com/rrepeat:repeat-y;有问题的页面上有一个匹配实例(除了第一个“r”):我已经检查了包含的CSS文件,但没有匹配项(如果匹配,我想我会在包含CSS文件的所有

javascript - 使 Firefox 渲染 Canvas 文本与 CSS 文本相同

我一直在试验canvas标签和Javascript。我制作了一个页面,该页面从Twitter公共(public)时间线获取推文并将其动画化。它通过在动画背景中使用Canvas元素来工作。动画完成后,它会在顶部创建一个具有相同文本的div元素。我这样做是为了让推文文本可以选择并且链接可以点击。现在,在Safari、Chrome甚至Opera中,canvas文本和div文本看起来几乎完全一样。然而在Firefox中,文本的大小差异足以使其在变为div时“跳转”。有谁知道如何使用CSS使Firefox在canvas元素和div上呈现相同的文本?或者这是与引擎的渲染不一致。我已经把页面onmy